<template>
	<!-- 一级布局一 -->
	<view class="cate-four row">
		<view class="aside">
			<scroll-view style="height: 100%" scroll-y="true" scroll-with-animation="true">
				<block v-for="(item, index) in cateList" :key="index">
					<view :class="'one-item sm ' + (index == selectIndex ? 'active' : '')" @click="changeActive(index,item.id)">
						<text class="name">{{ item.name }}</text>
						<view v-if="index == selectIndex" class="active-line bg-primary"></view>
					</view>
				</block>
			</scroll-view>
		</view>
		<view class="main bg-white">
			<scroll-view style="height: 100%" scroll-y="true" scroll-with-animation="true" @scrolltolower="getGoodsSearchFun">
				<view class="main-wrap">
					<!-- 轮播图 -->
					<view style="border-radius: 10rpx;">
						<swipers :pid="4" height="200rpx" previous-margin="0" padding="20rpx 0 0" radius="10rpx">
						</swipers>
					</view>
					<!-- 品牌推荐 -->
					<view class="cate-two mt20" v-if="currentType">
						<view v-for="(sitem, sindex) in cateTwoList" :key="sindex" class="two-item bg-white mb20">
							<!-- 测试1 -->
							
							<!-- 	<navigator class="title row-between" v-if="sitem.type == 1" hover-class="none"
									:url="`/pages/goods_search/goods_search?id=${sitem.id}&name=${sitem.name}&type=${sitem.type}`"> -->
									<navigator class="title row-between" v-if="sitem.type == 1" hover-class="none"
										:url="`/pages/bundle/categoryList/categoryList?id=${sitem.id}`">
								<text class="name bold sm">{{sitem.name}}</text>
								<u-icon name="arrow-right"></u-icon>
							</navigator>
							<view class="title row-between" v-else>
								<!-- 测试2 -->
								<text class="name bold sm">{{sitem.name}}</text>
							</view>
							<view class="three-list row wrap">
								<!-- 测试3 -->
								<!-- <navigator v-for="(titem, tindex) in sitem.sons" :key="tindex"
									class="three-item column-center mb20" hover-class="none"
									:url="`/pages/goods_search/goods_search?id=${titem.id}&name=${titem.name}&type=${titem.type}`"> -->
									<navigator v-for="(titem, tindex) in sitem.sons" :key="tindex"
										class="three-item column-center mb20" hover-class="none"
										:url="`/pages/goods_search/goods_search?search_word=${titem.name}`">
									<u-image mode="aspectFit" width="150rpx" height="150rpx" :src="titem.image">
									</u-image>
									<view class="text mt20 xs">{{ titem.name }}</view>
								</navigator>
							</view>
						</view>
					</view>
					<!-- <!-- 商品排序列表 --> 
					<!-- <view class="goods" v-else>
						
						<view class="row condition bg-white mt20">
							<view :class="'tag row-center ' + (comprehensive ? 'primary' : '')" @tap="onNormal">综合</view>
							<view class="tag row-center" data-type="priceSort" @tap="onPriceSort">
								<text :class="priceSort ? 'primary' : ''">价格</text>
								<view>
									<trigonometry direction="up" size="small" :color="priceSort == 'desc' ? '#FF5058' : '#333'">
									</trigonometry>
									<trigonometry size="small" :color="priceSort == 'asc' ? '#FF5058' : '#333'"></trigonometry>
								</view>
							</view>
							<view class="tag row-center" data-type="saleSort" @tap="onSaleSort">
								<text :class="saleSort ? 'primary' : ''">销量</text>
								<view>
									<trigonometry direction="up" size="small" :color="saleSort == 'desc' ? '#FF5058' : '#333'">
									</trigonometry>
									<trigonometry size="small" :color="saleSort == 'asc' ? '#FF5058' : '#333'"></trigonometry>
								</view>
							</view>
						</view> -->
						<!-- 商品列表 -->
						<!-- <view class="goods-list ">
							<navigator hover-class="none" class="row item bg-white mt50 cate2_btn" v-for="(item, index) in goodsList" :key="index" :url="`/pages/goods_details/goods_details?id=${item.id}`">
								<view class="tss_left">
									<text class="tss_left_title">-泰时尚-</text>
									<u-image width="200rpx" height="200rpx" border-radius="14rpx" :src="item.image"></u-image>
								</view>
								<view class="flex1 ml20 mr10 tss_right">
									<view class="line2">{{item.name}}</view>
									<view class="muted" >
										<text class="xxs">原价</text>  <price-format :subscriptSize="22" :firstSize="22" :secondSize="22" :price="item.market_price"></price-format>
									</view>
									<view class="primary mt10">
										<price-format :price="item.price" :subscriptSize="22" :firstSize="34" :secondSize="26"></price-format>
									</view>
								</view>
							</navigator>
						</view> -->
						
						
							
							
							<!-- <navigator hover-class="none" class="card row   mt50"  v-for="(item, index) in goodsList" :key="index" :url="`/pages/goods_details/goods_details?id=${item.id}`"> -->
							<!-- <navigator hover-class="none" class=" row   mt50"  v-for="(item, index) in navListSecond" :key="index" :url="`/pages/bundle/categoryList/categoryList?id=${item.id}`"> -->
								<!-- <view class="card"> -->
								<!-- <view class="cardImgBox"> -->
									<!-- <view class="topImgText">-泰新布业-</view> -->
									<!-- <u-image class="cardImg" width="210rpx" height="210rpx" border-radius="14rpx" :src="`https://test.txjtapi.cn/${item.image}`"></u-image> -->
									<!-- <image class="cardImg" :src="`https://test.txjtapi.cn/${item.image}`" lazy-load='true'/> -->
								<!-- </view> -->
								<!-- <view class="cardInfoBox">
									<view class="productName">{{item.name}}</view>
									<view class="muted" >
										<text class="xxs ">原价</text>  <price-format :subscriptSize="22" :firstSize="22" :secondSize="22" :price="item.price_old"></price-format>
									</view>
									<view class="primary mt10">
										<price-format :price="item.price" :subscriptSize="22" :firstSize="34" :secondSize="26"></price-format>
									</view>
									</view>
								</view>
								<view class="card__texture"></view> -->
							<!-- </navigator> -->
							
							<!-- <navigator hover-class="none" class=" row   mt50"  v-for="(item, index) in navListSecond" :key="index" :url="`/pages/bundle/categoryList/categoryList?id=${item.id}`"> -->
							<view hover-class="none" class=" row   mt50"  v-for="(item, index) in navListSecond" :key="index" @tap="goToCateList(item.id)">
								<view class="card">
								<view class="cardImgBox">
									<view class="topImgText">-泰新布业-</view>
									<!-- <u-image class="cardImg" width="210rpx" height="210rpx" border-radius="14rpx" :src="`https://test.txjtapi.cn/${item.image}`"></u-image> -->
									<image class="cardImg" :src="`https://test.txjtapi.cn/${item.image}`" lazy-load='true'/>
								</view>
								<view class="cardInfoBox">
									<view class="productName">{{item.name}}</view>
									<view class="muted" >
										<text class="xxs ">原价</text>  <price-format :subscriptSize="22" :firstSize="22" :secondSize="22" :price="item.price_old"></price-format>
									</view>
									<!-- <view class="primary mt10">
										<price-format :price="item.price" :subscriptSize="22" :firstSize="34" :secondSize="26"></price-format>
									</view> -->
									<view class="primary mt10">
										<!-- <price-format :price="item.price" :subscriptSize="22" :firstSize="34" :secondSize="26"></price-format> -->
										<view class="priceText" >
											￥{{item.price}}
										</view>
									</view>
									</view>
								</view>
								<view class="card__texture"></view>
								</view>
							<!-- </navigator> -->
							
							
							
						<!-- 暂无商品 -->
						<loading-footer :status="status" :slot-empty="true" @refresh="onRefresh(activeId)">
							<view slot="empty" class="column-center" style="padding: 200rpx 0 0">
								<image class="img-null" src="https://test.txjtapi.cn/miniapp/static/images/goods_null.png"></image>
								<text class="lighter sm">产品上新中~</text>
								<text class="lighter sm">敬请期待！</text>
							</view>
						</loading-footer>
					
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		toLogin
	} from '@/utils/login';
	import {
		getCatrgory
	} from '@/api/store';
	import {
		arraySlice,
		trottle,
		loadingFun
	} from '@/utils/tools'
	import {
		getGoodsSearch,
		getCateSecond
	} from '@/api/store';
	import {
		loadingType
	} from '@/utils/type';
	export default {
		name: "cate-four",
		props: {
			list: {
				type: Array,
				default: () => ([])
			}
		},
		data() {
			return {
				page:1, 
				status: loadingType.LOADING,
				selectIndex: 0,
				cateList: [],
				cateTwoList: [],
				goodsList: [],
				priceSort: '',
				saleSort: '',
				navListSecond:[],
				activeId:'',
				// 超时定时器
				overTimer: null,
				// 是否超时
				isOvertime: false,
			};
		},
		created() {
			//this.onNormal = trottle(this.onNormal, 500, this);
			//this.onPriceSort = trottle(this.onPriceSort, 500, this);
			//this.onSaleSort = trottle(this.onSaleSort, 500, this);
			 // 开启定时器
			    this.overTimer = setTimeout(() => {
			      this.isOvertime = true;
				  this.submitOrder();
			    }, 2000)
		},
		destroyed () {
		    // 销毁定时器
		    clearTimeout(this.overTimer)
		},
		onLoad(){
			// this.onRefresh()
			
		},
		methods: {
			goToCateList(id){
				if (!this.isLogin) return toLogin();
			uni.navigateTo({
				url: `/pages/bundle/categoryList/categoryList?id=${id}`
			});	
			},
			async submitOrder () {
			        // 判定是否超时
			        if (this.isOvertime && this.status == 'loading' && this.cateList.length == 0) {
			           
					  
					   	await getCatrgory().then(res => {
					   		if (res.code == 1) {
					   			this.cateList = res.data
					   		}
					   	});
					   
					   
					   setTimeout(()=>{
						   this.onRefresh(this.cateList[1].id)
						   
						   
					   },2000)
			           
			        }
			    },
			changeActive(index,id) {
				const {
					cateList
				} = this
				this.selectIndex = index
				this.cateTwoList = cateList[this.selectIndex].sons || []
				this.onRefresh(id)
			},
			onRefresh(id) {
				this.page = 1
				this.goodsList = []
				this.navListSecond = []
				this.status = loadingType.LOADING
				this.activeId = id
				this.$nextTick(() => {
					// this.getGoodsSearchFun();
					this.getCateSecond(id)
					// console.log('点击一次')
				});
			},
			// 获取二级分类
			async getCateSecond(id){
				const res = await getCateSecond({pid:id})
				
				// if(res.data == NULL)
				// {
				// 	this.status = "empty";
					
				// }else{
				// 	this.status = "finished"
				// }
				if(res.data.length >= 1 && res.code == 1 || id == 0){
					
						this.status = loadingType.FINISHED
					
					
					
				}else if(res.data.length == 0 && res.code == 1 && id != 0){
					this.status = loadingType.EMPTY
				}else if(res.code != 1){
					this.status = loadingType.ERROR
				}
				
				// if(res.code == 1){
				// 	this.status = loadingType.ERROR
				// }
				
				//this.status = "finished"
				// console.log(res.data,this.status,'刘明')
				this.navListSecond = res.data
				
				
				
				
				
				
				// console.log(this.navListSecond,'获取二级分类成功！！！')
			},
			onNormal() {
				this.priceSort = ''
				this.saleSort = ''
				this.onRefresh();
			},
			
			onPriceSort() {
				let {
					priceSort
				} = this;
				this.saleSort = ''
				this.priceSort = priceSort == 'asc' ? 'desc' : 'asc'
				this.onRefresh();
			},
			
			onSaleSort() {
				let {
					saleSort
				} = this;
				this.priceSort = ''
				this.saleSort = saleSort == 'desc' ? 'asc' : 'desc'
				this.onRefresh();
			},
			async getGoodsSearchFun() {
				let {
					page,
					goodsList,
					priceSort,
					saleSort,
					status,
					cateList,
					selectIndex
				} = this;
				const item = cateList[selectIndex] 
				if(item.type == 0) return
				if (status == loadingType.FINISHED) return;
				const params = {
					category_id: item.id,
					page_no: page,
					price: priceSort,
					sales_sum: saleSort
				}
				const data = await loadingFun(getGoodsSearch, page, goodsList, status, params)
				// console.log(data,'data成功')
				if (!data) return
				this.page = data.page
				this.goodsList = data.dataList
				this.status = data.status
			},
		},
		watch: {
			list: {
				handler(val) {
					if(!val.length) return
					let index = val.findIndex((item) => item.type == 1)
					
					this.selectIndex = index == -1 ? 0 : index
					this.cateList = val
					this.cateTwoList = val[this.selectIndex] ? val[this.selectIndex].sons : []
					// this.getGoodsSearchFun()
					// console.log(val,'导航列表')
					let _that = this;
					this.$nextTick(()=>{
						_that.onRefresh(val[1].id)
					})
					
				}
			}
		},
		computed: {
			comprehensive() {
				const {
					priceSort,
					saleSort
				} = this
				if (priceSort == '' && saleSort == '') {
					return true;
				}
		
				return false;
			},
			currentType() {
				const {
					cateList,
					selectIndex
				} = this
				return cateList[selectIndex] ? cateList[selectIndex].type == 0 : true
			}
		},
	}
</script>

<style lang="scss">
	$header-height: 94rpx;
	.cate-four {
		height: calc(100vh - #{$header-height} - var(--window-top) - var(--window-bottom));
		background-color: #fff;

		.aside {
			width: 180rpx;
			flex: none;
			height: 100%;

			.one-item {
				position: relative;
				text-align: center;
				padding: 26rpx 10rpx;

				&.active {
					color: $-color-primary;
					font-size: 26rpx;
					font-weight: bold;
				}

				.active-line {
					position: absolute;
					width: 6rpx;
					height: 30rpx;
					left: 4rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}

		.main {
			height: 100%;
			flex: 1;

			.main-wrap {
				position: relative;
				padding: 0 20rpx;
				.goods {
					.item {
						border-radius: 14rpx;
						// overflow: hidden;
						.add {
							width: 46rpx;
							height: 46rpx;
							line-height: 46rpx;
							text-align: center;
						}
					}
				}
				.two-item {
					border-radius: 10rpx;

					.title {
						height: 90rpx;
						padding: 0 20rpx;

						.line {
							width: 40rpx;
							height: 1px;
							background-color: #BBBBBB;
						}
					}

					.three-list {
						align-items: flex-start;
						padding: 0 10rpx;

						.three-item {
							width: 33%;

							.text {
								text-align: center;
							}
						}
					}

				}
			}
		}
		.condition {
			height: 80rpx;
			border-radius: 10rpx;
		
			.tag {
				flex: 1;
			}
		}
	}
	// .cate2_btn{
		
	// 	border: 1rpx solid white;
	// 	  box-shadow: 6rpx 6rpx 12rpx #c5c5c5,
	// 	             -6rpx -6rpx 12rpx #ffffff;
	// 				 .tss_left,.tss_right{
	// 					 z-index: 999 !important;
	// 				 }
	// }
	
	
	.mt50{
		margin-top: 50rpx;
	}
	.tss_left{
		margin-top: -50rpx;
		.tss_left_title{
			color: #f1939c;
			font-weight: 700;
			font-style: italic;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.tss_right{
		// display:flex;
		.title{
			background-image:-webkit-linear-gradient(top,red,#fd8403,yellow); 
			    -webkit-background-clip:text; 
			    -webkit-text-fill-color:transparent;
			font-size: 30rpx;
			font-weight: 700;
			font-style: italic;
			margin-bottom: 30rpx;
		}
		
	}
	
	/* 卡片 */
	.card {
	  width: 100%;
	  height: 230rpx;
	  margin-bottom: 30rpx;
	  background-color: #fff;
	  position: relative;
	  display: flex;
	  border-radius: 18rpx;
	  box-shadow: 10rpx 10rpx 10rpx #bebebe, -10rpx -10rpx 30rpx #eee;
	}
	/* 卡片图片盒子 */
	.cardImgBox {
	  width: 175rpx;
	  height: 225rpx;
	  position: absolute;
	  top: -50rpx;
	  margin: 20rpx 20rpx 0rpx 30rpx;
	  position: relative;
	  box-shadow: 10rpx 10rpx 10rpx #bebebe, -10rpx -10rpx 30rpx #eee;
	
	  border-radius: 10rpx;
	  overflow: hidden;
	}
	/* 图片上方文字 */
	.topImgText {
	  width: 175rpx;
	  height: 50rpx;
	  line-height: 50rpx;
	  font-size: 25rpx;
	  text-align: center;
	  font-style: italic;
	  font-weight: 700;
	  color: #cd7f32;
	  border-radius: 15rpx 15rpx 0 0;
	  background-color: #fff;
	}
	/* 卡片图片 */
	.cardImg {
	  width: 175rpx;
	  height: 175rpx;
	}
	/* 卡片信息盒子 */
	.cardInfoBox {
	  flex: 1;
	  height: 200rpx;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-around;
	  /* background-color: #fff; */
	}
	/* 品名 */
	.productName {
	  font-weight: 400;
	}
	.category_code{
	  font-size: 30rpx;
	  color: rgb(114, 107, 107);
	}
	/* Dark theme */
	//   @media (prefers-color-scheme: dark) {
	//   :root {
	//     --bg: hsl(var(--hue),10%,30%);
	//     --fg: hsl(var(--hue),10%,90%);
	//   }
	// }
	
	/* Animation */
	// @keyframes rotate_500 {
	//   from,
	//     to {
	//     animation-timing-function: ease-in;
	//     // box-shadow: 0 0 0 hsl(0,0%,80%),
	//     //         0.1rem 0 0 hsl(0,0%,100%),
	//     //         -0.2rem 0 0.75rem 0 hsla(0,0%,0%,0.3);
	//     transform: rotateY(-10deg);
	//   }
	
	//   25%,
	//     75% {
	//     animation-timing-function: ease-out;
	//     // box-shadow: 0 0 0 hsl(0,0%,80%),
	//     //         0 0 0 hsl(0,0%,100%),
	//     //         -0.25rem -0.05rem 1rem 0.15rem hsla(0,0%,0%,0.3);
	//     transform: rotateY(0deg);
	//   }
	
	//   50% {
	//     animation-timing-function: ease-in;
	//     // box-shadow: -0.1rem 0 0 hsl(0,0%,80%),
	//     //         0 0 0 hsl(0,0%,100%),
	//     //         -0.3rem -0.1rem 1.5rem 0.3rem hsla(0,0%,0%,0.3);
	//     transform: rotateY(10deg);
	//   }
	// }
	
	// @keyframes texture {
	//   from,
	//     to {
	//     transform: translate3d(0,0,0);
	//   }
	
	//   50% {
	//     transform: translate3d(-50%,0,0);
	//   }
	// }                     
	.priceText{
		font-size: 28rpx;
	}
</style>
